大家雙十連假開心嗎~~
我很開心唷!不過是因為鐵人賽終於倒數一個星期啦!終於快要解脫了!
每天都在水生火熱，超級刺激的。

那在這最後七哩路，我們也要趕緊把最後能製作的功能加上去，搶在第29天的時候公開最終成品~

今天要做的是留言區，範例成品如下:

大概會用2~3天來說明和修改留言區，並最後加入在自己的網頁內。

那我們開始吧!

這個的js頗長的，就稍微分段說明。

var p = document.getElementsByClassName("p")[0];
var ul = document.getElementsByTagName("ul")[0];
var wbk = document.getElementById("wbk");
var btn = document.getElementById("btn");
var num = 0;

這個就是昨天有提到的宣告變數。
用var就不會被鎖定只能宣告一次
getElementsByClassName(" ") : 是返回檔案中所有指定的元素集合，例如:字串。
getElementsByTagName(" ") : 是指返回檔案內元素的順序，返回排序會和原檔案內的排序相同。
getElementById(" ") : 用來返回特定id的內容，(" ")裡要放id名字。

參考資料:
https://www.w3school.com.cn/htmldom/met_doc_getelementbyid.asp
https://www.runoob.com/jsref/met-document-getelementsbyclassname.html
https://www.w3school.com.cn/htmldom/met_doc_getelementsbytagname.asp

//設定顯示以留言內容區域
btn.onclick = function(){
if(wbk.value.length != 0){
p.style.display = "none";
var li = document.createElement("li");
var em = document.createElement('em');
var a = document.createElement("a");
var span = document.createElement("span");
              
li.innerHTML = wbk.value;
li.insertBefore(em,li.firstChild);
//insertBefore可以在已有的子節點**前**插入一个新的子節點
//新增刪除皆可以使用
a.innerHTML = "點我刪除";
a.setAttribute("href","javascript:void(0)");
li.appendChild(a);
//appendChild是在最后節點**後**再加入一個子節點

span.innerHTML = "第" + num + "個";
li.appendChild(span);
             
wbk.value = "";
ul.appendChild(li);
fn1();
fn2();
}else{
alert("請輸入內容")
//若是偵測到還沒有輸入文字就按發布就會出現彈跳視窗
}
}

可以回去參考【DAY23 彈跳視窗】裡面有提到彈跳視窗語法喔

參考資料
https://www.w3school.com.cn/jsref/met_node_appendchild.asp
https://www.w3school.com.cn/jsref/met_element_setattribute.asp
https://www.runoob.com/jsref/met-node-insertbefore.html

以上是我開賽的第二十四天，讓我們來期待第二十五天的到來吧!
加油、加油! 倒數6天。